/*
 * @Description: 
 * @Author: 韩双双
 * @Date: 2021-04-23 21:16:19
 * @LastEditTime: 2021-04-27 15:03:31
 * @LastEditors: 韩双双
 */
import React, { useEffect, useState } from 'react';
import { observer } from 'mobx-react-lite';

import styles from './git.less'
import { useLocation } from 'umi'
import useStore from '@/context/useStore';

import ArticlesTag from '@/component/Articel/articles';
import Category from '@/component/Articel/category';
import Loding from '@/component/Articel/loding';
import Icon from '@/component/Articel/icon';

import {TagsOutlined} from '@ant-design/icons';
import { Affix } from 'antd';
import { timeAgo } from '@/utils/Time';


function git() {
    let { article } = useStore();
    let location = useLocation()
    const [top, setTop] = useState(10);
    const [bottom, setBottom] = useState(10);

    useEffect(() => {
        article.gettagGit((location.state as { ID: string }).ID)
    }, [article.tagGitDetail])
    return (
        <div className={styles.box}>
            <div className={styles.left}>
                {
                    article.tagGitDetail.length &&
                        <div>
                            <div className={styles.handle}>
                                <p><TagsOutlined style={{fontSize:'40px', color:'#cccccc'}}/></p>
                                <p> <b>{article.tagGitDetail[0].tags[0].label}</b> 分类文章</p>
                                <p>共搜索到 <b>{article.tagGitDetail.length}</b> 篇</p>
                            </div>
                            <div>
                                {

                                    article.tagGitDetail.map((item) => {
                                        // console.log(item.title)
                                        return <div key={item.id} className={styles.dl}>
                                            {
                                                item.cover? <div className={styles.cover}>
                                                    <img src={item.cover} alt="" />
                                                </div>:<></>
                                            }
                                            <div className={styles.content}>
                                                <p className={styles.itemp}>{item.title}</p>
                                                <p>{item.summary}</p>
                                                <p>
                                                    {/* <span>{item.tags && item.tags[0].label + ' · '}</span> */}

                                                    <span>{item.views + '次阅读'} </span>
                                                    <span>{timeAgo(+ new Date(item.createAt)) + '前'}</span>
                                                </p>
                                            </div>
                                        </div>
                                    })
                                }
                            </div>
                        </div>
                }
            </div>
            <div className={styles.right}>
                <Affix offsetBottom={bottom}>
                    <Loding></Loding>
                </Affix>
                <br />

                <Affix offsetTop={top}>
                    <div>
                        <Category></Category>
                        <ArticlesTag></ArticlesTag>
                        <Icon></Icon>
                    </div>
                </Affix>
            </div>
        </div>
    )
}
export default observer(git)